<template>
    <div class="columnWrapper" :style="`height:${colH ? colH + 'px' : '100%'};width:${colW ? colW + 'px' : '100%'}`" :data-hash="hashName">
        <slot></slot>
      </div>
    </template>
    <script>
    import emitter from '../../utils/emitter.js'
    import { createHash } from '../../utils/createHash'
    export default {
      name: 'v-col',
      mixins: [emitter],
      inject: ['root'],
      data() {
        return {
          chart: null,
          colH: 0,
          colW: 0
        }
      },
      computed: {
        hashName() {
          const name = 'v-col' + '_' + createHash(4)
          return name
        },
      },
      watch: {
        root: {
            handler(n, o) {
                this.colH = n[`${this.hashName}_height`]
                this.colW = n[`${this.hashName}_width`]
                this.$emit('popCol', {'height': this.colH, 'width': this.colW})
            },
            deep: true
        }
    },
      mounted() {
        this.$nextTick(cb => {
          this.dispatch('v-fullscreen', 'handleModule', { name: this.hashName, height: this.height, width: this.width })
          this.colH = this.root[`${this.hashName}_height`]
          this.colW = this.root[`${this.hashName}_width`]
        })
      },
      props: {
        height: {
          type: Number,
          default: 0
        },
        width: {
          type: Number,
          default: 0
        }
      },
      methods: {
      }
    }
    </script>
    <style scoped>
    .columnWrapper{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    </style>
    